<template>
  <div class="right-container bg-color-white" style="width: 1012px">
    <div class="info-title">
      个人资料
    </div>
    <div style="border-bottom: 2px solid #f2f2f2;"></div>
    <div style="padding: 0 50px 33px">
      <el-form class="user-info-form" ref="formRef" :model="data.userInfo" :rules="rules" label-width="100px">
        <h3 class="title-style color-default">个人信息</h3>
        <el-form-item label="姓名:" prop="name">
          <el-input v-model="data.userInfo.name" style="width: 40%" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别:" prop="gender">
          <el-radio v-model="data.userInfo.gender" :label="1">男</el-radio>
          <el-radio v-model="data.userInfo.gender" :label="0">女</el-radio>
        </el-form-item>
        <el-form-item label="意向考试:">
          <div class="font-small">
            <span style="color: #9598a2;margin-right: 32px">{{data.userInfo.intentionalExam}}</span>
            <span style="color: #04ADDB" @click="changeIntentExamHandle">修改意向考试</span>
          </div>
        </el-form-item>
        <el-form-item label="学历:" prop="academic">
          <el-input v-model="data.userInfo.academic" style="width: 40%" placeholder="请输入您的学历"></el-input>
        </el-form-item>
        <el-form-item label="专业:" prop="schoolProfession">
          <el-input v-model="data.userInfo.schoolProfession" style="width: 40%" placeholder="请输入您的专业"></el-input>
        </el-form-item>
        <el-form-item label="毕业时间:" prop="graduationDate">
          <el-date-picker
              style="width: 40%"
              v-model="data.userInfo.graduationDate"
              value-format="YYYY"
              type="year"
              placeholder="请选择毕业时间"
          ></el-date-picker>
        </el-form-item>
        <h3 class="title-style color-default">职业信息</h3>
        <el-form-item label="所在地区:">
          <el-select clearable v-model="data.userInfo.provinceId" placeholder="请选择省份" style="width: 40%;margin-right: 30px" @change="changeProvinceHandle">
            <el-option v-for="item in data.provinceList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-select clearable v-model="data.userInfo.cityId" placeholder="请选择城市" style="width: 40%;">
            <el-option v-for="item in data.cityList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所在行业:" prop="belongIndustry">
          <el-input v-model="data.userInfo.belongIndustry" style="width: 40%" placeholder="请输入您的行业"></el-input>
        </el-form-item>
        <el-form-item label="职位:" prop="post">
          <el-input v-model="data.userInfo.post" style="width: 40%" placeholder="请输入您的职位"></el-input>
        </el-form-item>
        <el-form-item label="从业年限:" prop="workYears">
          <el-select clearable v-model="data.userInfo.workYears" placeholder="请选择您的工作年限" style="width: 40%">
            <el-option v-for="item in Constant.workYearsList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <h3 class="title-style color-default">邮箱信息</h3>
        <el-form-item label="常用邮箱:" prop="email">
          <el-input v-model="data.userInfo.email" style="width: 40%" placeholder="请输入您的邮箱"></el-input>
        </el-form-item>
      </el-form>
      <div class="flex-all-center" style="margin-top: 30px">
        <el-button class="save-button" color="#04ADDB" @click="save">{{'保存设置'}}</el-button>
      </div>
    </div>
  </div>
  <SelectExamDialog :visible="data.showSelectExamDialog" :courseId="data.userInfo.intentionalExamId" @afterSelectExamHandle="afterSelectExamHandle" @closeSelectExamDialog="closeSelectExamDialog"></SelectExamDialog>
</template>
<script setup>
import {getCurrentInstance, onMounted, reactive} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {Constant} from "@/api/const";
import {getTreeDictByCode} from '../../../api/home.js'
import {changeUserInfo, getUserInfo} from '../../../api/user.js'
import {ElMessage} from 'element-plus'
import SelectExamDialog from '../../component/select-exam-dialog.vue'
import {formatNull} from '../../../utils/common.js'

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const emits = defineEmits(['afterSaveHandle'])
const data = reactive({
  userInfo: {
    id: '',
    name: '',
    gender: 1,
    intentionalExamId: '',
    intentionalExam: '',
    academic: '',
    schoolProfession: '',
    graduationDate: '',
    provinceId: '',
    cityId: '',
    belongIndustry: '',
    post: '',
    workYears: '',
    email: ''
  },
  provinceList: [],
  cityList: [],
  showSelectExamDialog: false,

});
const rules = ({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
})
const initOptions = () => {
  getTreeDictByCode({typeCode: 'regionCode'}, (res)=> {
    let resData = res.data
    data.provinceList = resData.map(item => {
      return {id:item.id,name:item.name}
    })
  })
}
const initData = () => {
  getUserInfo((res)=> {
    data.userInfo = res.data
    if (data.userInfo.provinceId) {
      changeProvinceHandle()
    }
  })
  initOptions()
}
function changeIntentExamHandle() {
  data.showSelectExamDialog = true
}
function closeSelectExamDialog() {
  data.showSelectExamDialog = false
}
function afterSelectExamHandle(item) {
  let selectCourseItem = item
  data.userInfo.intentionalExamId = selectCourseItem.id
  data.userInfo.intentionalExam = selectCourseItem.name
  closeSelectExamDialog()
}
function changeProvinceHandle() {
  getTreeDictByCode({typeCode: 'regionCode',parentId:data.userInfo.provinceId}, (res)=> {
    let resData = res.data
    data.cityList = resData.map(item => {
      return {id:item.id,name:item.name}
    })
  })
}
function save() {
  let dataForm = data.userInfo
  proxy.$refs.formRef.validate((valid) => {
    if(valid){
      changeUserInfo(dataForm, (res) => {
        ElMessage.success('操作成功')
        localStorage.setItem('intentionalExam',formatNull(data.userInfo.intentionalExam))
        localStorage.setItem('intentionalExamId',formatNull(data.userInfo.intentionalExamId))
        localStorage.setItem('name',formatNull(data.userInfo.name))
        afterSaveHandle()
      }, (err) => {
        ElMessage.error(err.msg)
      })
    }
  })
}
function afterSaveHandle() {
  emits('afterSaveHandle')
}
onMounted(() => {
  initData()
})

</script>

<style scoped>
.title-style {
  line-height: 16px;
  padding-left: 10px;
  margin: 33px 0 20px 0;
  font-size: 16px;
  font-weight: 400;
  border-left: 3px solid #04ADDB
}

.info-title {
  padding-left: 50px;
  font-size: 22px;
  height: 89px;
  line-height: 89px;
  font-size: 22px;
  font-weight: 400;
}

.user-info-form .el-input {
  --el-input-height: 30px;
}
/deep/.user-info-form .el-form-item__label {
  margin-right: 25px;
}
/deep/.user-info-form .el-select__wrapper {
  height: 30px;
  border-radius: 0;
  border: 1px solid #EBEBEB;
}
/deep/.user-info-form .el-input__wrapper {
  height: 30px;
}
/deep/.user-info-form .el-select__wrapper:hover {
  border: 1px solid #04ADDB;
}
.save-button {
  min-width: 154px;
  height: 36px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 50px;
  border: 1px #04addb solid;
  text-align: center;
  align-content: center;
}
</style>
